import React, { Component } from 'react'
import { Row, Col } from 'antd';
import Gauge from './components/gague';
import Item from './components/Item';

import fireImg from '@/assets/images/icon/home_fire.png'
import dangerImg from '@/assets/images/icon/home_danger.png'
import { connect } from 'dva';
import { Dispatch } from 'typings/redux';

interface P {
  dispatch?: Dispatch;
  data?: {
    fire: number;
    fireHandle: number;
    danger: number;
    dangerHandle: number;
    state1: number;
    state8: number;
    state16: number;
    state32: number;
    score: number;
  }
}

interface Item {
  name: string;
  value: number;
}

@connect(({ home }) => ({
  data: home.alarmToday || {}
}))
class AlaramToday extends Component<P> {

  componentDidMount() {

    const { dispatch } = this.props;
    dispatch({ type: 'home/queryAlarmToday' })
  }
  
  render() {

    const { data } = this.props;
    
    const { fire, fireHandle, state1 = 0, state32 = 0, score } = data;
    const fireI = [
      { name: '火警数', value: fire },
      { name: '已处理', value: fireHandle },
    ];
    const dangerI = [
      { name: '隐患数', value: state1 },
      { name: '已整改', value: state32 },
    ];

    return (
      <Row type="flex" justify="space-around" style={{ height: '100%', width: '100%' }}>
        <Col span={6} style={{ height: '100%' }}>
          <Item data={fireI} src={fireImg} />
        </Col>
        <Col span={6} style={{ height: '100%' }}>
          <Item data={dangerI} src={dangerImg} />
        </Col>
        <Col span={8} style={{ height: '100%' }}>
          <Gauge data={score || 0} />
        </Col>
      </Row>
    )
  }
}

export default AlaramToday

